//container样式
@mixin center {
    width: 1200px;
    margin: 0 auto;
}

//阴影
@mixin shadow() {
    cursor: pointer;
    // box-shadow: 4px 4px 3px #c2bfbf;
    box-shadow: 0px -2px 8px 0px #c2bfbf,
        /*上边阴影  */
        -2px 0px 8px 0px #e6e3e3,
        /*左边阴影  */
        2px 0px 8px 0px #c2bfbf,
        /*右边阴影  */
        0px 2px 8px 0px #c2bfbf;
    /*下边阴影  */
}
//价格
@mixin price($col:red, $font:10px) {
    color: $col;
    font-size: $font;
}
#product-list {
    width: 100%;
  
    #container {
        @include center();
        .ulProduct{
            width: 100%;
            overflow: hidden;
            ul {

                li {
                    float: left;
                    width: 276px;
                    height: 388px;
                    background-color: #fff;
                    margin-right: 12px;
                    margin-left: 12px;
                    margin-bottom: 18px;
    
                    &:hover {
                        @include shadow();
                    }
    
                    .img {
                        width: 276px;
                        height: 276px;
    
                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
    
                    .describe {
                        width: 242px;
                        height: 18px;
                        font-size: 14px;
                        margin: 6px 14px;
                        color: #877A73;
                        white-space: nowrap;
                        /* 文本溢出隐藏 */
                        overflow: hidden;
                        /* 文本溢出的标识是省略号 */
                        text-overflow: ellipsis;
                    }
    
                    .titie {
                        width: 242px;
                        height: 20px;
                        margin: 16px 14px 12px 14px;
                        display: flex;
                        justify-content: space-between;
    
                        .titie-l {
                            width: 40px;
                            height: 20px;
                            color: #fff;
                            background-color: #FF4400;
                            text-align: center;
                            line-height: 20px;
                            font-size: 14px;
                            border-radius: 2px;
                        }
    
                        .titie-r {
                            width: 50px;
                            height: 20px;
                            font-size: 14px;
                            color: #877A73;
                            text-align: center;
                            line-height: 20px;
                        }
                    }
    
                    .price {
                        width: 242px;
                        height: 28px;
                        margin: 0px 14px;
                        display: flex;
                        justify-content: space-between;
    
                        .price-l {
                            width: 140px;
                            height: 28px;
    
                            .a {
                                @include price(#fa585a, 14px)
                            }
    
                            .b {
                                @include price(#fa585a, 20px)
                            }
    
                            //  .c{
                            //     @include price(#fa585a,16px)
                            //  }
                            .d {
                                @include price(#877A73, 12px)
                            }
    
                        }
    
                        .price-r {
    
                            width: 50px;
                            height: 20px;
                            text-align: center;
                            color: #fa585a;
                            font-size: 12px;
                            line-height: 20px;
                            border-radius: 2px;
                            box-shadow: inset 0 0 0 1px #fa585a;
                            margin-top: 8px;
                        }
                    }
                }
    
            }
        }
        //加载更多
        .click {
            width: 180px;
            height: 50px;
            border-radius: 20px;
            text-align: center;
            line-height: 50px;
            background-color: #FEE44E;
            color: rgb(10, 10, 10);
            font-size: 20px;
            cursor: pointer;
            margin: 40px auto;
        }
    }
            //页脚
            .footer{
                width: 100%;
                    height: 240px;
                    background-color: #484848;
                .footer-t {
                    width: 1200px;
                    height: 200px;
        margin: 0 auto;
                    display: flex;
        
                    .foot-font {
                        width: 120px;
                        height: 120px;
                        margin: 37px 19px 0 40px;
        
                        img {
                            width: 100%;
                            height: 100%;
        
                        }
                    }
        
                    .foot-text {
                        width: 200px;
                        height: 100px;
                        margin: 50px 19px 0 10px;
        
                        h3 {
                            font-size: 32px;
                            font-weight: 600;
                            color: #fff;
                        }
        
                        p {
                            font-size: 18px;
                            color: #fff;
                        }
                    }
        
                    .foot-download {
                        width: 200px;
                        height: 40px;
                        font-size: 20px;
                        margin: 80px 0px 0 160px;
                        color: #fff;
                    }
                }
        
                .footer-b {
                    margin: 0 auto;
                    width: 1200px;
                    height: 40px;
        
                    p {
                        font-size: 18px;
                        text-align: center;
                        line-height: 40px;
                        color: #fff;
                    }
                }
            }
}